<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="pragma" content="no-cache">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="screen-orientation" content="portrait">
    <!--uc强制竖屏-->
    <meta name="full-screen" content="yes">
    <!-- UC强制全屏 -->
    <meta name="browsermode" content="application">
    <!-- UC应用模式 -->
    <meta name="x5-orientation" content="portrait">
    <!--QQ强制竖屏-->
    <meta name="x5-fullscreen" content="true">
    <!-- QQ强制全屏 -->
    <meta name="x5-page-mode" content="app">
    <!-- QQ应用模式 -->
    <title>宝莲灯珠宝</title>
    <link rel="stylesheet" href="css/swiper-3.4.0.min.css">
    <link href="images/logo1.ico" rel="shortcut icon" />
    <script src="js/swiper-3.4.0.min.js"></script>

</head>
<script>
    (function(win) {
        var doc = win.document;
        var docEl = doc.documentElement;
        var tid;

        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            if (width > 540) { // 最大宽度
                width = 540;
            }
            var rem = width / 6.4;
            docEl.style.fontSize = rem + 'px';
        }

        win.addEventListener('resize', function() {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }, false);
        win.addEventListener('pageshow', function(e) {
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);

        refreshRem();

    })(window);

//document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
</script>


<style>
    html{ font-family:'Microsoft Yahe','Segoe UI', 'Lucida Grande', 'Helvetica Neue', Helvetica, tahoma, Arial, 'Droid Sans', 'hiragino sans gb', stheiti, 'wenquanyi micro hei', '\5FAE\8F6F\96C5\9ED1', sans-serif;}
    html,body{ background:#fff;}
    *{box-sizing: border-box;padding:0; margin:0; list-style:none;}
    input[type=”button”], input[type=”submit”], input[type=”reset”] { -webkit-appearance: none; appearance: none; }
    img{ border:none; display:block; width: 100%;}
    a{ text-decoration:none;outline: none;background: transparent; -webkit-tap-highlight-color: transparent; color:#333;}
    body {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        font-size: 0.25rem;
        line-height: 1.5;
        color: #3d4145;
        /*overflow: hidden;*/
    }
    .main{
        overflow: hidden;
        margin-bottom: 0.3rem;
    }

    header{
        display: -webkit-flex; /* Safari */
        display: flex;
        flex-direction:row;
        justify-content:space-between;
        width:100%;
        height: 1rem;
        background: #797979;
        position:fixed;
        top:0;
        z-index: 100;
    }
    .icon_menu{
        width: 0.8rem;
        height: 0.8rem;
        background: url(images/index/i-menu.png) center no-repeat;
        background-size: 50%;
        margin-top: 0.1rem;
    }
    .logo_txt{
        height: 0.8rem;
        margin-top: 0.1rem;
    }
    .shopping_cart{
        background: url(images/index/i-gouwuce.png) center no-repeat;
        background-size: 50%;
        width: 1rem;
        height: 1rem;
    }
    .bar-nav-title{
        width:2.5rem;
    }
    section{
        margin-bottom: 1.2rem;
        margin-top: 1rem;
        background: #eee;
        overflow: hidden;
    }

    .pc-footer{
        display: -webkit-flex; /* Safari */
        display: flex;
        flex-direction:row;
        justify-content:space-around;
        width:100%;
        height: 1.1rem;
        background: #fff;
        position: fixed;
        bottom:0;
        padding-top: 0.1rem;
        border-top: 1px solid #F1F1F1;
    }
    .pc-footer a i{
        display: inline-block;
        width:0.55rem;
        height:0.55rem;
        vertical-align: middle;
        text-align: center;
    }
    .on{
        color:#C57E5D;
    }

    .go-home{
        background: url("images/bottom-fxied/i-sy-d.png") no-repeat center;
        background-size: contain;
    }
    .idea{
        background: url("images/bottom-fxied/i-dz-e.png") no-repeat center;
        background-size: contain;
    }
    .book{
        background: url("images/bottom-fxied/i-zs-e.png") no-repeat center;
        background-size: contain;
    }
    .my{
        background: url("images/bottom-fxied/i-wd-e.png") no-repeat center;
        background-size: contain;
    }

    .home-nav{
        margin-top: 0.2rem;
        font-size: 0.3rem;
        background-color: #fff;
    }
    .nav1,.nav2{
        display: -webkit-flex; /* Safari */
        display: flex;
        flex-direction:row;
        justify-content:space-around;
        padding:0.1rem 0;
    }
    .home-nav a i{
         display: inline-block;
         width:1rem;
         height:1rem;
         vertical-align: middle;
         text-align: center;
     }
   .home-nav a p{
       color:#999;
       text-align: center;

   }
    .home-nav .nav1 a:nth-of-type(1) i{
        background: url(images/index/i-Aqu.png) center no-repeat;
        background-size: contain;
    }
    .home-nav .nav1 a:nth-of-type(2) i{
        background: url(images/index/i-Bqu.png) center no-repeat;
        background-size: contain;
    }
    .home-nav .nav1 a:nth-of-type(3) i{
        background: url(images/index/i-zfsc.png) center no-repeat;
        background-size: contain;
    }
    .home-nav .nav1 a:nth-of-type(4) i{
        background: url(images/index/i-zzs.png) center no-repeat;
        background-size: contain;
    }

    .home-nav .nav2 a:nth-of-type(1) i{
        background: url(images/index/i-zsdz.png) center no-repeat;
        background-size: contain;
    }
    .home-nav .nav2 a:nth-of-type(2) i{
        background: url(images/index/i-wyjh.png) center no-repeat;
        background-size: contain;
    }
    .home-nav .nav2 a:nth-of-type(3) i{
        background: url(images/index/i-zzzx.png) center no-repeat;
        background-size: contain;
    }
    .home-nav .nav2 a:nth-of-type(4) i{
        background: url(images/index/i-bzsh.png) center no-repeat;
        background-size: contain;
    }

    .small-img{
        margin-top: 0.2rem;


    }
    .top-img, .bottom-img{
        display: -webkit-flex; /* Safari */
        display: flex;
        flex-direction:row;
        justify-content:space-around;
        margin-top: 0.1rem;
    }

    .top-img a:nth-of-type(1) img{
        height:1.7rem;
    }
    .top-img a:nth-of-type(2) img{
        height:1.7rem;
        margin-left: 0.1rem;
    }
    .bottom-img a:nth-of-type(1) img{
        height:1.7rem;
    }
    .bottom-img a:nth-of-type(2) img{
        height:1.7rem;
        margin-left: 0.1rem;
    }
    .home-show a{
        display: inline-block;
        margin-top: 0.1rem;
        width:100%;
    }

    .home-footer{
        margin-top: 0.1rem;
        background-color: #fff;
        padding-top: 0.1rem;
    }
    .footer-img{
        display: -webkit-flex; /* Safari */
        display: flex;
        flex-direction:row;
        justify-content:space-around;
        padding-bottom: 0.1rem;
        border-bottom: 1px solid #eee;
    }
    .footer-img a{
        width:1.3rem;
    }
    .footer-img a>div{
        height:0.7rem;
    }
    .footer-img a>p{
        text-align: center;
    }
    .footer-img a:nth-of-type(1) div{
        background: url(images/index/i-zp.png) center no-repeat;
        background-size: contain;
    }
    .footer-img a:nth-of-type(2) div{
        background: url(images/index/i-qgby.png) center no-repeat;
        background-size: contain;
    }
    .footer-img a:nth-of-type(3) div{
        background: url(images/index/i-zsby.png) center no-repeat;
        background-size: contain;
    }
    .footer-img a:nth-of-type(4) div{
        background: url(images/index/i-srdz.png) center no-repeat;
        background-size: contain;
    }


    .footer_txt,.footer_txt2{
        font-size: 0.3rem;
        text-align: center;
    }
    .footer_txt a{
        margin:0.2rem 0;
    }
    .footer_txt a:nth-of-type(1) i{
        display: inline-block;
        width:0.35rem;
        height:0.35rem;
        background: url("images/index/dianhua.png") no-repeat left;
        background-size: contain;
    }
    .footer_txt a:nth-of-type(2) {
        display: inline-block;
        text-align: center;
    }
    .footer_txt a:nth-of-type(2) p{
        width:3rem;
        color: #ffffff;
        background: #C57E5D;
        border-radius: 0.1rem;
    }
</style>
<body>
    <div class="main">
        <div class="home">
            <header>
                <a href="javascript:;"  class="icon_menu"></a>
                <a href="javascript:;"  class="logo_txt"><img class="bar-nav-title" src="images/index/logo-2.png" alt=""/></a>
                <a href="javascript:;"  class="shopping_cart"></a>
            </header>
            <section>
                <!--轮播图-->
                <div class="swiper-container header-container swiper-container-horizontal">
                        <div class="swiper-wrapper">
                            <a class="swiper-slide  " href="javascript:;" target="_blank">
                                <img src="images/index/p1.jpg">
                            </a>
                            <a class="swiper-slide" href="javascript:;" target="_blank">
                                <img src="images/index/p1.jpg">
                            </a>
                            <a class="swiper-slide" href="javascript:;" target="_blank">
                                <img src="images/index/p1.jpg">
                            </a>
                        </div>
                        <div class="swiper-pagination  header-pagination swiper-pagination-clickable swiper-pagination-bullets">
                        </div>
                    </div>
                <!--轮播图end-->

                <!--主体-->
                <div class="home-nav">
                    <div class="nav1">
                        <a href="javascript:;">
                            <i></i>
                            <p class="">A区</p>
                        </a>
                        <a href="javascript:;">
                            <i></i>
                            <p class="">B区</p>
                        </a>
                        <a href="javascript:;">
                            <i></i>
                            <p class="">积分商场</p>
                        </a>
                        <a href="javascript:;">
                            <i></i>
                            <p class="">找钻石</p>
                        </a>
                    </div>
                    <div class="nav2">
                        <a href="javascript:;">
                            <i></i>
                            <p class="">钻石定制</p>
                        </a>
                        <a href="javascript:;">
                            <i></i>
                            <p class="">我要结婚</p>
                        </a>
                        <a href="javascript:;">
                            <i></i>
                            <p class="">认证中心</p>
                        </a>
                        <a href="javascript:;">
                            <i></i>
                            <p class="">宝钻生活</p>
                        </a>
                    </div>
                </div>
                <div class="small-img">
                    <div class="top-img">
                        <a href="javascript:;"><img src="images/index/pa1.jpg" alt=""/></a>
                        <a href="javascript:;"><img src="images/index/pa2.jpg" alt=""/></a>
                    </div>
                    <div class="bottom-img">
                        <a href="javascript:;"><img src="images/index/pa3.jpg" alt=""/></a>
                        <a href="javascript:;"><img src="images/index/pa4.jpg" alt=""/></a>
                    </div>
                </div>
                <div class="home-show">
                    <a href="javascript:;"><img src="images/index/pb1.jpg" alt=""/></a>
                    <a href="javascript:;"><img src="images/index/pb2.jpg" alt=""/></a>
                    <a href="javascript:;"><img src="images/index/pb3.jpg" alt=""/></a>
                </div>
                <!--home底部-->
                <footer class="home-footer ">
                    <div class="footer-img">
                        <a href="javascript:;">
                            <div></div>
                            <p>100%正品</p>
                        </a>
                        <a href="javascript:;">
                            <div></div>
                            <p>全国包邮</p>
                        </a>
                        <a href="javascript:;">
                            <div></div>
                            <p>终身保养</p>
                        </a>
                        <a href="javascript:;">
                            <div></div>
                            <p>私人订制</p>
                        </a>
                    </div>
                    <div class="footer_txt">
                        <a href="javascript:;">
                            <i></i>
                            <span>4006-020-091</span>
                        </a><br>
                        <a href="javascript:;">
                            <p>进店有礼·甜蜜不停</p>
                        </a>
                    </div>
                    <div class="footer_txt2">
                        <p>Copyright ©2016-2020 宝钻库</p>
                        <p>www.baozhuanku.com</p>
                        <p>粤ICP备 11146114号 -1</p>
                    </div>
                </footer>

            </section>

            <footer class="pc-footer">
                <a href="javascript:;">
                    <i class="go-home on"></i>
                    <p class="on">首页</p>
                </a>
                <a href="idea.html">
                    <i class="idea"></i>
                    <p>定制</p>
                </a>
                <a href="book.html">
                    <i class="book"></i>
                    <p>证书</p>
                </a>
                <a href="my.html ">
                    <i class="my "></i>
                    <p>我的</p>
                </a>
            </footer>
        </div>
    </div>
</body>
<script>

    var header_wp = new Swiper('.header-container', {
        pagination: '.header-pagination',
        paginationClickable: true,
        loop: true,
        autoplay: 3000,
        speed: 600
    });
</script>
</html>